// 文件列表组件
const FileList = {
  template: `
        <div class="tag-info">
            <div class="section-header">
                <div class="section-title">
                    <div class="info-icon">i</div>
                    标签信息列表
                </div>
                
                <div class="tag-controls">
                    <button class="batch-modify-btn" @click="batchModify">
                        <span>✏</span>
                        批量修改
                    </button>
                    <button class="batch-import-btn" @click="batchImport">
                        <span>📥</span>
                        批量导入
                    </button>
                </div>
            </div>
            <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick($event)">
                <el-tab-pane label="已上传未导入" name="notImported" ></el-tab-pane>
                <el-tab-pane label="已导入" name="imported" ></el-tab-pane>
                <el-tab-pane label="异常文件：上传失败、导入失败" name="error" ></el-tab-pane>
            </el-tabs>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>
                        <el-checkbox 
                            v-model="localSelectAll" 
                            @change="handleSelectAllChange"
                            :disabled="activeTab === 'imported'">
                        </el-checkbox></th>
                        <th>文件名</th>
                        <th>飞机编号</th>
                        <th>发动机编号</th>
                        <th>发动机位置</th>
                        <th>台架编号</th>
                        <th>文件上传时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="file in filteredFileList" :key="file.id">
                        <td>
                        <el-checkbox 
                            v-model="file.selected" 
                            @change="updateSelectAll"
                            :disabled="activeTab === 'imported'">
                        </el-checkbox></td>
                        <td class="file-name">{{ file.fileName }}</td>
                        <td>{{ file.planeNo }}</td>
                        <td>{{ file.engineNo }}</td>
                        <td>{{ file.enginePlace }}</td>
                        <td>{{ file.deviceNo }}</td>
                        <td>{{ file.uploadTime }}</td>
                        <td>
                            <a href="#" class="tag-info-link" @click.prevent="showTagInfo(file)">
                                {{ (activeTab === 'imported' || activeTab === 'error' || file.importStatus === 1) ? '◇标签信息' : '◇修改标签' }}
                            </a>
                            <a href="#" class="import-link" @click.prevent="importFile(file)" v-if="file.uploadStatus === 1 && [0, 2].includes(file.importStatus)">
                                📥导入
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页控件 -->
            <div class="pagination">
                <div class="pagination-info">共{{ filteredTotalFiles }}条</div>
                <div class="pagination-controls">
                    <button 
                        v-for="page in totalPages" 
                        :key="page"
                        class="page-btn" 
                        :class="{ active: currentPage === page }"
                        @click="changePage(page)">
                        {{ page }}
                    </button>
                    <select class="page-size-selector" :value="pageSize" @change="changePageSize">
                        <option value="10">10条/页</option>
                        <option value="20">20条/页</option>
                        <option value="50">50条/页</option>
                    </select>
                </div>
            </div>
        </div>
    `,
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    selectAll: {
      type: Boolean,
      default: false,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    totalFiles: {
      type: Number,
      default: 0,
    },
    currentTab: {
      type: String,
      default: "notImported",
    },
  },
  data() {
    return {
      activeTab: "notImported", //默认显示未导入标签页
      localSelectAll: false, // 本地全选状态
    };
  },

  watch: {
    // 监听props中的selectAll变化，同步到本地状态
    selectAll: {
      handler(newVal) {
        this.localSelectAll = newVal;
      },
      immediate: true,
    },
    // 监听父组件的currentTab变化，同步到本地activeTab
    currentTab: {
      handler(newVal) {
        // 只有当值真正改变时才更新，避免重复触发
        if (this.activeTab !== newVal) {
          this.activeTab = newVal;
        }
      },
      immediate: true,
    },
  },

  computed: {
    // 直接返回文件列表，分页和过滤由后端处理
    filteredFileList() {
      return this.fileList;
    },

    // 使用传入的总文件数
    filteredTotalFiles() {
      return this.totalFiles;
    },

    // 基于总文件数的分页总数
    totalPages() {
      return Math.ceil(this.totalFiles / this.pageSize);
    },
  },

  methods: {
    //处理标签页切换
    handleTabClick(tab) {
      // 如果点击的是同一个标签页，不执行任何操作
      if (this.activeTab === tab.paneName) {
        return;
      }

      // 更新本地状态
      this.activeTab = tab.paneName;
      // 通知父组件标签页切换（只通知一次，让父组件处理所有逻辑）
      this.$emit("tab-change", tab.paneName);
    },

    handleSelectAllChange(newSelectAll) {
      this.localSelectAll = newSelectAll; // 更新本地状态
      this.$emit("toggle-select-all", newSelectAll);
    },

    updateSelectAll() {
      this.$emit("update-select-all");
    },

    batchModify() {
      this.$emit("batch-modify");
    },

    batchImport() {
      this.$emit("batch-import");
    },

    async importFile(file) {
      // 调用父组件的导入方法
      this.$emit("import-file", file);
    },

    showTagInfo(file) {
      this.$emit("show-tag-info", file);
    },

    changePage(page) {
      this.$emit("change-page", page);
    },

    changePageSize(event) {
      const newPageSize = parseInt(event.target.value);
      this.$emit("change-page-size", newPageSize);
    },
  },
};

// 组件定义完成
